import Vue from 'vue';

// v-dialogDrag: 弹窗拖拽
Vue.directive('noteDrag', {
    bind(el, binding, vnode, oldVnode) {
        const dialogHeaderEl = el.querySelector('.notes-select-bar');
        const dragDom = el;
        let is_moving = false
        dialogHeaderEl.onmousedown = (e) => {
            // 鼠标按下，计算当前元素距离可视区的距离
            const disX = e.clientX - dragDom.offsetLeft;
            const disY = e.clientY - dragDom.offsetTop;

            is_moving = true

            document.onmousemove = function (e) {
                // 通过事件委托，计算移动的距离
                let l = e.clientX - disX;
                let t = e.clientY - disY;

                // // 移动当前元素
                // dragDom.style.left = `${l + styL}px`;
                // dragDom.style.top = `${t + styT}px`;
                if (is_moving) {
                    if (l < 0) {
                        l = 0
                    } else if (l > document.documentElement.clientWidth - dragDom.offsetWidth) {
                        l = document.documentElement.clientWidth - dragDom.offsetWidth;
                    }
                    if (t < 125) {
                        t = 125
                    } else if (t > document.documentElement.clientHeight - dragDom.offsetHeight) {
                        t = document.documentElement.clientHeight - dragDom.offsetHeight;
                    }
                }

                //移动当前元素
                dragDom.style.left = l + 'px';
                dragDom.style.top = t + 'px';
                dragDom.style.bottom = t + 'px';
            };

            document.onmouseup = function (e) {
                is_moving = false;
                document.onmousemove = null;
                document.onmouseup = null;
            };
        }
    }
})
